<template>
  <div class="full">
    <div class="container">
      <div class="full-secondtitle">
        <div class="h1">烟感设备</div>
      </div>
    </div>
    <div class="flex-container-el">
      <el-table
        :data="tableData"
        class="transparent-table"
        height="220"
        header-row-style="background-color: #1a519e60"
      >
        <el-table-column v-slot="{ row }" label="序号" width="60">
          <div class="eltableXH">
            {{ row.index }}
          </div>
        </el-table-column>
        <el-table-column label="监控安装位置">
          <template #default="{ row }">
            <el-button class="eltablexq" type="text">{{
              row.type
            }}</el-button></template
          >
        </el-table-column>
        <el-table-column label="工况/感应" width="150">
          <template #default="{ row }">
            <el-tag :type="row.status === '正常' ? 'success' : 'warning'">
              {{ row.status }}
            </el-tag>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="container">
      <div class="full-secondtitle">
        <div class="h1">环境监控</div>
      </div>
    </div>
    <div class="flex-container-el">
      <el-table
        :data="tableData"
        class="transparent-table"
        height="220"
        header-row-style="background-color: #1a519e60"
      >
        <el-table-column v-slot="{ row }" label="序号" width="60">
          <div class="eltableXH">
            {{ row.index }}
          </div>
        </el-table-column>
        <el-table-column label="监控安装位置">
          <template #default="{ row }">
            <el-button class="eltablexq" type="text">{{
              row.type
            }}</el-button></template
          >
        </el-table-column>
        <el-table-column label="工况/感应" width="150">
          <template #default="{ row }">
            <el-tag :type="row.status === '正常' ? 'success' : 'warning'">
              {{ row.status }}
            </el-tag>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="container">
      <div class="full-secondtitle">
        <div class="h1">消防监控</div>
      </div>
    </div>
    <div class="flex-container-el">
      <el-table
        :data="tableData"
        class="transparent-table"
        height="220"
        header-row-style="background-color: #1a519e60"
      >
        <el-table-column v-slot="{ row }" label="序号" width="60">
          <div class="eltableXH">
            {{ row.index }}
          </div>
        </el-table-column>
        <el-table-column label="监控安装位置">
          <template #default="{ row }">
            <el-button class="eltablexq" type="text">{{
              row.type
            }}</el-button></template
          >
        </el-table-column>
        <el-table-column label="工况/感应" width="150">
          <template #default="{ row }">
            <el-tag :type="row.status === '正常' ? 'success' : 'warning'">
              {{ row.status }}
            </el-tag>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script >
// var chartDom = document.getElementById("main");postall
// var myChart = echarts.init(chartDom);
import * as echarts from "echarts";
import { ref, onMounted, watch } from "vue";
import axios from "axios";

export default {
  data() {
    return {
      tableData: [
        { index: 1, type: "类型1", status: "正常", name: "17" },
        { index: 2, type: "类型2", status: "离线", name: "16" },
        { index: 3, type: "类型3", status: "正常", name: "15" },
        { index: 4, type: "类型4", status: "正常", name: "11" },
        { index: 5, type: "类型5", status: "正常", name: "41" },
        { index: 6, type: "类型6", status: "正常", name: "41" },
        // 其他数据
      ],
    };
  },
  setup() {},
  mounted() {},
  methods: {},
};
</script>
<style scoped>
.full {
  display: flex;
  flex-direction: column;
  width: 25rem;
  /* background-color: #e62f29; */
}
.container {
  display: flex;
  justify-content: space-between;
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
}
.full-secondtitle {
  display: flex;
  align-items: center;
  background-color: #ffffff70;
  padding: 0.3rem 1rem;
}
.full-secondtitle .h1 {
  line-height: 1;
  font-size: 1.4rem;

  font-weight: 600;
  color: #ffffff;
}
.cht1 {
  width: 25rem;
  height: 12.5rem;
  border: 0.08rem solid rgba(255, 255, 255, 0.575);
}
.cht11 {
  width: 25rem;
  height: 15rem;
  border: 0.08rem solid rgba(255, 255, 255, 0.575);
}
.chart1 {
  width: 25rem;
  height: 12.5rem;
}

.chart11 {
  width: 25rem;
  height: 15rem;
}
.flex-container-el {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  flex-grow: 1;
  width: 25rem;
  border: 0.08rem solid rgba(255, 255, 255, 0.575);
}

.el-table {
  --el-table-border-color: transparent;
  --el-table-border: none;
  --el-table-text-color: #ffffff;
  --el-table-header-text-color: #ffffff;
  --el-table-row-hover-bg-color: transparent;
  --el-table-current-row-bg-color: transparent;
  --el-table-header-bg-color: transparent;
  --el-table-bg-color: transparent;
  --el-table-tr-bg-color: transparent;
  --el-table-expanded-cell-bg-color: transparent;
}
.el-tag {
  background-color: transparent;
  font-size: 1rem;
  border-radius: 0.3rem;
}
.eltableXH {
  font-size: 0.7rem;

  font-weight: 400;
  color: #ffffff;
  width: 1.375rem;
  height: 1rem;
  background-image: url("../assets/序号.png");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  text-align: center;
}
.eltablexq {
  color: #ffffff;
}
/* // 修改高亮当前行颜色 */
::v-deep .el-table tbody tr:hover > td {
  background: rgba(0, 255, 255, 0.217) !important;
}
/* 修改表头样式-加边框 */
::v-deep .el-table__header-wrapper {
  border-bottom: 1px solid rgba(255, 255, 255, 0.575);
}
/* 去掉表格里的padding */
::v-deep .el-table .cell,
.el-table th div {
  text-align: center;
  font-size: 1rem;
  overflow: hidden;
  text-overflow: ellipsis;
}
::v-deep .el-table .el-table__cell {
  padding: 3px 0;
}
</style>